<template>
	<view>
		<view class="" style="height: 230rpx;">
			
		</view>
		<view class="card u-p-b-30" v-if="list.length > 0">
			<view class="card-title">
				<text>新人专享</text>
			</view>
			<view class="card-scroll">
				<scroll-view :scroll-x="true" >
					<view class="m-scroll">
						<view class="m-scroll-view" v-for="(item,index) in list" :key="index">
							<view class="m-scroll-box">
								<view class="u-flex u-row-center">
									<text class="m-scroll-font1">{{item.money}}</text>
								</view>
								<view class="m-scroll-font2">
									<text>满{{item.man}}元使用</text>
								</view>
								<view class="u-flex u-row-center">
									<view class="m-scroll-btn" @click="lingquFun(item)" v-if="item.if_ke_lingqu ==1">
										<text>立即兑换</text>
									</view>
									<view class="m-scroll-btn" style="background: #ccc;border-color: #ccc;color: #fff;" v-else>
										<text>已领完</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="card">
			<view class="card-title">
				<text>领券中心</text>
			</view>
			<view class="m-list">
				<view class="m-item" v-for="(item,index) in list2" :key="index">
					<view class="m-item-left">
						<view class="">
							<text class="m-item-price">{{item.money}}</text>
						</view>
						<view class="m-item-text">
							<text>满{{item.man}}元使用</text>
						</view>
					</view>
					<view class="m-item-right">
						<view class="m-item-btn" @click="lingquFun(item)" v-if="item.if_ke_lingqu ==1">
							<text>立即兑换</text>
						</view>
						<view class="m-item-btn" style="background: #ccc;border-color: #ccc;color: #fff;" v-else>
							<text>已领完</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				list:[],
				list2:[],
			}
		},
		onLoad(opt) {
			this.getDataFun()
			this.getDataFun2()
		},
		methods: {
			lingquFun(item){
				this.$http.getJson('users_yhqLingqu',{id:item.id}).then(res=>{
					this.$m.msg(res.message)
					if(res.code == 1){
						this.getDataFun()
						this.getDataFun2()
					}
				})
			},
			getDataFun(){
				this.$http.getJson('users_yhqList',{page:1,pagenum:50,type:1}).then(res=>{
					if(res.code == 1){
						this.list = res.data || []
					}
				})
			},
			getDataFun2(){
				this.$http.getJson('users_yhqList',{page:1,pagenum:50,type:2}).then(res=>{
					if(res.code == 1){
						this.list2 = res.data || []
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-image: url("../static/coupon/banner_lqzx .png");
	background-repeat: no-repeat;
	background-size: 750rpx 264rpx;
	background-color: #f6f6f6;
}
.card{
	width: 700rpx;
	background: #fff;
	margin-left: 25rpx;
	margin-top: 30rpx;
	border-radius: 12rpx;
	.card-title{
		font-size: 34rpx;
		color: #33302D;
		padding: 32rpx 20rpx 24rpx;
	}
	.card-scroll{
		width: 100%;
		height: 234rpx;
		scroll-view{
			width: 100%;
			height: 100%;
		}
		.m-scroll{
			display: flex;
			padding-left: 20rpx;
			.m-scroll-view{
				padding-right: 20rpx;
				.m-scroll-box{
					width: 204rpx;
					height: 233rpx;
					background-image: url("../static/coupon/bg_xinrenquan.png");
					background-size: 100% 100%;
					padding-top: 10rpx;
				}
				.m-scroll-font1{
					font-size: 64rpx;
					color: #8F6F4C;
					line-height: 80rpx;
					&::after{
						content: '元';
						font-size: 24rpx;
					}
				}
				.m-scroll-font2{
					font-size: 22rpx;
					color: #76706B;
					text-align: center;
				}
				.m-scroll-btn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 124rpx;
					height: 48rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					border: 2rpx solid #FFFFFF;
					font-size: 24rpx;
					color: #fff;
					margin-top: 35rpx;
				}
			}
		}
	}
	
	.m-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0rpx 20rpx 10rpx;
		.m-item{
			display: flex;
			align-items: center;
			width: 324rpx;
			height: 170rpx;
			background-image: url("../static/coupon/bg_youhuiquan.png");
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			.m-item-left{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 192rpx;
				.m-item-price{
					font-size: 64rpx;
					color: #8F6F4C;
					&::after{
						content: '元';
						font-size: 24rpx;
					}
				}
				.m-item-text{
					font-size: 22rpx;
					color: #76706B;
				}
			}
			.m-item-right{
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				.m-item-btn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 112rpx;
					height: 48rpx;
					background: linear-gradient(180deg, #FFFFFF 0%, #FFF3E6 100%);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
					border: 1rpx solid #F5E1CB;
					font-size: 24rpx;
					color: #8F6F4C;
				}
			}
		}
	}
}
</style>
